<template>
    <div style="position: fixed;width: 100%;height: 100%;overflow-y: scroll;">
        <div style="position: absolute;top: .6rem;left: .6rem;" @click="goBack">< 返回</div>
        <div style="text-align: center;padding: .6rem 0;">添加住户信息</div>
        <hr>
        <div class="house">
            <div class="m-input">
                <span class="label">选择小区:</span>
                <select class="input" v-model="p1" @change="getP2(p1)">
                    <option value="">请选择</option>
                    <option v-for="v in housinggestateList" :value="v.id" :label="v.name">{{v.name}}</option>
                </select>
            </div>
            <div class="m-input">
                <span class="label">选择楼号:</span>
                <select class="input" v-model="p2" @change="getP3AndP4">
                    <option value="">请选择</option>
                    <option v-for="v in buildingList" :value="v.id">{{v.name}}</option>
                </select>
            </div>
            <div class="m-input">
                <span class="label">选择单元:</span>
                <select class="input" v-model="p3" @change="changeP3AndP4">
                    <option value="">请选择</option>
                    <option v-for="v in unitList" :value="v.id">{{v.name}}</option>
                </select>
            </div>
            <div class="m-input">
                <span class="label">选择楼层:</span>
                <select class="input" v-model="p4" @change="changeP3AndP4">
                    <option value="">请选择</option>
                    <option v-for="v in floorList" :value="v.id">{{v.name}}</option>
                </select>
            </div>
            <div class="m-input">
                <span class="label">选择房号:</span>
                <select class="input" v-model="p5">
                    <option value="">请选择</option>
                    <option v-for="v in housinggestateHouseList" :value="v.id">{{v.name}}</option>
                </select>
            </div>
            <div class="m-input">
                <span class="label">选择人数:</span>
                <select class="input" v-model="person_num">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                </select>
            </div>
            <div class="m-input">
                <span class="label">是否业主：</span>
                <el-radio v-model="is_owner" label="1">是</el-radio>
                <el-radio v-model="is_owner" label="0">否</el-radio>
            </div>
            <div class="m-input">
                <span class="label">注册人姓名：</span>
                <input class="input" type="text" v-model="user_name" placeholder="输入注册人姓名">
            </div>
            <div class="m-input">
                <span class="label">手机号：</span>
                <input class="input" type="text" v-model="mobile" placeholder="输入注册人手机号">
            </div>
            <div class="m-input">
                <span class="label">手机验证码：</span>
                <input class="input" type="text" v-model="regCode" placeholder="输入手机验证码" style="width: 8rem;">
                <!--<button style="width: 5rem;margin-left: .5rem;padding: .5rem 0;">发送验证码</button>-->
                <el-button @click="sendCode">{{sendCodeMsg}}</el-button>
            </div>

            <div style="margin: 3rem 0 1rem 0;text-align: center;">
                <el-button type="primary" style="width: 80%;padding: 1rem 0;" @click="sub">提交</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "address-add",
        data(){
            return{
                housinggestateList: [],
                p1: '',
                buildingList: [],
                p2: '',
                unitList: '',
                p3: '',
                floorList: '',
                p4: '',
                housinggestateHouseList: '',
                p5: '',
                person_num: '1',
                is_owner: '1',
                user_name: '',
                mobile: '',
                regCode: '',
                sendCodeMsg: '发送验证码'
            }
        },
        watch: {
        },
        methods: {
            loadopen() {
                this.loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.2)'});
                setTimeout(() => {this.loading.close();}, 5000);
            },
            loadclose() {this.loading.close();},
            goBack(){
                this.$router.push('/mobile/address')
            },
            getMyAddress(){
                this.loadopen();
                this.config.mpost('/api/housinggestate/findMyHousinggestate', {}).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.userAddressList = res.data.userAddressList;
                    }else{
                        this.$message.error(this.config.mobileError(res.data));
                    }
                });
            },
            getP1(){
                this.loadopen();
                this.config.mpost('/api/base/getHousinggestateList', {}).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.housinggestateList = res.data.housinggestateList;
                    }else{
                        this.$message.error(this.config.mobileError(res.data));
                    }
                });
            },
            getP2(id){
                this.p2 = '';
                this.loadopen();
                this.config.mpost('/api/base/getBuildingList', {housinggestateId: id}).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.buildingList = res.data.buildingList;
                    }else{
                        this.$message.error(this.config.mobileError(res.data));
                    }
                });
            },
            getP3AndP4(){
                this.getP3()
                this.getP4()
            },
            // 单元
            getP3(){
                this.p3 = '';
                this.loadopen();
                this.config.mpost('/api/base/getUnitList', {housinggestateId: this.p1, buildingId: this.p2}).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.unitList = res.data.unitList;
                    }else{
                        this.$message.error(this.config.mobileError(res.data));
                    }
                });
            },
            // 楼层
            getP4(){
                this.p3 = '';
                this.loadopen();
                this.config.mpost('/api/base/getFloorList', {housinggestateId: this.p1, buildingId: this.p2}).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.floorList = res.data.floorList;
                    }else{
                        this.$message.error(this.config.mobileError(res.data));
                    }
                });
            },
            changeP3AndP4(){
                this.p5 = '';
                if(this.p3&&this.p4){
                    this.getP5()
                }
            },
            // 楼层
            getP5(){
                this.loadopen();
                this.config.mpost('/api/base/getHouseList', {housinggestateId: this.p1, buildingId: this.p2, unitId:this.p3, floorId:this.p4,}).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.housinggestateHouseList = res.data.housinggestateHouseList;
                    }else{
                        this.$message.error(this.config.mobileError(res.data));
                    }
                });
            },
            sendCode(){
                if(this.sendCodeMsg!='发送验证码') return;
                if(!this.config.isMobile(this.mobile)) {
                    this.$message.error('请输入正确的手机号');
                    return;
                }
                this.loadopen();
                this.config.mpost('/api/housinggestate/sendCode', {mobile: this.mobile}).then(res => {
                    this.loadclose();
                    if (res.data.code === '0') {
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        });
                        this.sendCodeMsg='发送成功'
                        setTimeout(s=>{
                            this.sendCodeMsg='发送验证码'
                        },60000)
                    } else {
                        this.$message.error(this.config.mobileError(res.data));
                    }
                });
            },
            valid(){
                if(!this.p1||!this.p2||!this.p3||!this.p4||!this.p5||!this.person_num||!this.user_name||!this.mobile||!this.regCode) return false;
                return true;
            },
            sub(){
                if(!this.valid()) return;

                let p1Name,p2Name,p3Name,p4Name,p5Name;
                this.housinggestateList.map(it=>{if(this.p1==it.id){ p1Name = it.name; }});
                this.buildingList.map(it=>{if(this.p2==it.id){ p2Name = it.name; }});
                this.unitList.map(it=>{if(this.p3==it.id){ p3Name = it.name; }});
                this.floorList.map(it=>{if(this.p4==it.id){ p4Name = it.name; }});
                this.housinggestateHouseList.map(it=>{if(this.p5==it.id){ p5Name = it.name; }});

                let obj = {
                    'ua.housinggestate_id': this.p1,
                    'ua.housinggestate_name': p1Name,
                    'ua.building_id': this.p2,
                    'ua.building_name': p2Name,
                    'ua.unit_id': this.p3,
                    'ua.unit_name': p3Name,
                    'ua.floor_id': this.p4,
                    'ua.floor_name': p4Name,
                    'ua.house_id': this.p5,
                    'ua.house_name': p5Name,
                    'ua.person_num': this.person_num,
                    'ua.user_name': this.user_name,
                    'ua.mobile': this.mobile,
                    'code': this.regCode,
                    'ua.is_owner': this.is_owner,
                }
                this.loadopen();
                this.config.mpost('/api/housinggestate/bindingHouse', obj).then(res => {
                    this.loadclose();
                    if (res.data.code === '0') {
                        this.$message({message: res.data.message,type: 'success'});
                        this.$router.push('/mobile/address')
                    } else {
                        this.$message.error(this.config.mobileError(res.data));
                    }
                });
            }
        },
        mounted(){
            this.getP1()
        }
    }
</script>

<style scoped lang="less">
    .house .m-input{
        padding: .5rem;
    }
    .m-input{
        display: flex;
        align-items: center;
        .label{
            min-width: 20%;
            color: #777;
            font-size: .9rem;
            margin-right: 1rem;
        }
        .input{
            height: 2.2rem;
            width: 60%;
            border: none;
            border-bottom: 1px solid #ccc;
            color: #333;
            padding: 0 .5rem;
            outline: none;
        }
    }
</style>
